<template>
	<view>
		<cu-custom :bgLinerBorder="true" :isBlack="false">
			<block slot="content">个人信息</block>
		</cu-custom>
		<view class="contents">
			<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
				<view class="f-16 fontBold">
					头像
				</view>
				<view class=" flex align-center" @click="upImg">
					<view class="flex align-center">
						<image :src="postData.photo?postData.photo:'/static/img/headimg.png'" class="headimg" mode=""></image>
					</view>
					<image src="/static/img/right.png" class="right m-l-5" mode=""></image>
				</view>
			</view>
			<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
				<view class="f-16 fontBold">
					昵称
				</view>
				<view class="p-r-5">
					<input type="text" placeholder="请输入" v-model="postData.name" class="f-14 text-right"/>
				</view>
			</view>
			<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
				<view class="f-16 fontBold">
					电话
				</view>
				<view class="p-r-5" v-if="showPhone">
					{{showPhone}}
				</view>
				<view class="binding-phone" @click="openPop" v-else>
					绑定手机号
				</view>
			</view>
			<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
				<view class="f-16 fontBold">
					性别
				</view>
				<picker mode="selector" :range="sexArr" @change="changeSex">
					<view class="p-r-5 p-l-15">
						{{sexArr[postData.sex]}}
					</view>
				</picker>
			</view>
			<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
				<view class="f-16 fontBold">
					个人描述
				</view>
				<view class="p-r-5">
					<input type="text" placeholder="请输入" v-model="postData.describe" class="f-14 text-right"/>
				</view>
			</view>
			<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
				<view class="f-16 fontBold">
					所处行业
				</view>
				<view class="p-r-5">
					<input type="text" placeholder="请输入" v-model="postData.industry" class="f-14 text-right"/>
				</view>
			</view>
			<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
				<view class="f-16 fontBold">
					企业规模
				</view>
				<view class="p-r-5">
					<input type="text" placeholder="请输入" v-model="postData.scale" class="f-14 text-right"/>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="bottom-wrap flex justify-space-around">
			<view class="bottom-btn bottom-btn2" @click="sub()">
				保存
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="fontBold f-22 orange text-center m-b-15">
					绑定手机号
				</view>
				<view class="">
					<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
						<view class="f-16 fontBold flex-none">
							手机号
						</view>
						<view class="p-r-5">
							<input type="number" placeholder="请输入" v-model="phone" class="f-14 text-right"/>
						</view>
					</view>
					<view class="flex justify-space-between align-center scale-1px-bottom p-t-10 p-b-10">
						<view class="f-16 fontBold flex-none">
							验证码
						</view>
						<view class="p-r-5 flex align-center">
							<!-- <input type="number" placeholder="请输入" v-model="code" class="f-14 text-right"/> -->
							<input type="number" placeholder="请输入验证码" v-model="code" class="inputs f-14 text-right p-r-5"
								placeholder-class="inputs-place" maxlength="4"/>
							<view v-if="show" :disabled="CodeLoading" @click="getCode" class="code">获取验证码</view>
							<view v-else class="code">{{count}} s</view>
						</view>
					</view>
				</view>
				<view class="flex justify-center m-t-20">
					<view class=" btn btn2 m-r-10" @click="closePop()">
						取消
					</view>
					<view class=" btn" @click="bindDo">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postData:{
					name:'',
					sex:0,
					photo:'',
					industry:'',
					describe:'',
					scale:''
				},
				phone:'',
				code:'',
				showPhone:'',
				count: 0,
				CodeLoading: false,
				show: true,
				sexArr:['未知','男','女']
			}
		},
		onLoad(option) {
			this.getInfo();
			this.getInfo2();
		},
		methods: {
			upImg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res)
						let file = res.tempFiles[0];
						this.$util.uploadService(file,(e)=>{
							console.log(e)
							this.postData.photo = e;
						})
					}
				})
				// uni.chooseFile({
				//   count: 1,
				//   type: 'image',
				//   success :(res)=> {
				//     // tempFilePath可以作为img标签的src属性显示图片
				//     console.log(res)
				// 	let file = res.tempFiles[0];
				// 	this.$util.uploadService(file, (e) => {
				// 		this.postData.photo = e;
				// 		this.setInfo();
				// 	})
				//   }
				// })
			},
			changeSex(e){
				let val = e.detail.value;
				this.postData.sex = val;
			},
			getInfo2(){
				let data = {
					
				}
				this.$http('/apicloud/User/userInfo',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.showPhone = datas.username;
					}
				})
			},
			getInfo(){
				let data = {
					
				}
				this.$http('/apicloud/User/userInfo',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						datas.sex = datas.sex?datas.sex:0;
						this.postData = {...datas};
					}
				})
			},
			sub(){
				let data = this.postData;
				this.$http('/apicloud/User/saveUserInfo',data).then(res=>{
					if(res.code == 200){
						this.$util.showToast(res.mess);
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
					}else{
						this.$util.showToast(res.mess);
					}
				})
			},
			openPop(){
				this.$refs.popup.open();
			},
			closePop(){
				this.$refs.popup.close();
			},
			getCode() {
				const _this = this
				if (_this.phone !== '') { // 1.首先判断是否未输入手机号码就点击获取验证码
					if (/^1[3456789]\d{9}$/.test(this.phone)) { //2.使用正则判断手机输入的验证码是否符合规范
						_this.CodeLoading = true
						_this.$http('/apicloud/Auth/sendCode', {
								phone: this.phone
							}).then((res) => {
								_this.CodeLoading = false
								if (res.code !== 200) {
									uni.showToast({
										title: res.mess ? res.mess : '获取失败,请重试',
										icon: 'none'
									})
									return
								}
								const TIME_COUNT = 60; // 3.设置时间为60s
								if (!_this.timer) {
									_this.count = TIME_COUNT;
									_this.show = false; // 4.隐藏获取验证码按钮,展示倒计时模块
									// this.getPhoneCode() // 5.调用后端获取验证码接口的函数
									_this.timer = setInterval(() => {
										if (_this.count > 0 && _this.count <=
											TIME_COUNT) { // 6.设置每秒钟递减
											_this.count--;
										} else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
											_this.show = true;
											clearInterval(_this.timer);
											_this.timer = null;
										}
									}, 1000)
								}
							})
							.catch(() => {
								_this.CodeLoading = false
							})
			
					} else {
						uni.showToast({
							title: '手机号格式不正确',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
			},
			bindDo() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (this.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return;
				}
				let data = {
					phone: this.phone,
					code: this.code
				}
				this.$http('/apicloud/User/bindingPhone', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.mess,
							icon: 'none'
						})
						setTimeout(()=>{
							this.getInfo2();
							this.closePop();
						},800)
					} else {
						uni.showToast({
							title: res.mess,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.sel{
		width: 44rpx;
		height: 44rpx;
	}
	.right{
		width: 28rpx;
		height: 28rpx;
	}
	.headimg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 88;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;
	
		.bottom-btn {
			width: 100%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}
	
	
		.bottom-btn2 {
			background: #FF5200;
		}
	}
	.binding-phone{
		background: #FF5200;
		padding: 4rpx 20rpx;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 8rpx;
	}
	.popup_content {
		width: 90%;
		min-width: 660rpx;
		min-height: 350rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 28rpx;
		position: relative;
		padding: 30rpx;
	
		.btn {
			background: #FF5200;
			color: #ffffff;
			border-radius: 60rpx;
			width: 40%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn2{
			background: #666666;
		}
	}
	.code {
		min-width: 180rpx;
		text-align: center;
		font-size: 24rpx;
		padding: 10rpx;
		border-radius: 30px;
		background: #FFCB00;
		color: #ffffff;
	}
</style>
